<template>
  <div class="overview-container">
    <h2>会员中心概览</h2>
    <div class="stats-grid">
      <div class="stat-card">
        <h3>{{ safeData.count }}</h3>
        <p>会员总数</p>
        <el-progress :percentage="totalMembersPct" color="#409eff" :stroke-width="8" />
      </div>

      <div class="stat-card">
        <h3>{{ safeData.addmonth }}</h3>
        <p>本月新增</p>
        <el-progress :percentage="newMembersPct" color="#67c23a" :stroke-width="8" />
      </div>

      <div class="stat-card">
        <h3>{{ safeData.money }}</h3>
        <p>会员充值总额</p>
        <el-progress :percentage="rechargePct" color="#ff9f40" :stroke-width="8" />
      </div>
    </div>
  </div>
  <!-- 列表 -->
  <el-dialog v-model="vip" title="会员详情" width="61%" max-width="1200px">
    <div v-loading="date.loading"  class="dialog-content">
      <el-table :data="date.data" style="width: 100%" :header-cell-style="{ background: '#f5f7fa', color: '#333' }">
        <el-table-column prop="name" label="名字" width="180"></el-table-column>
        <el-table-column prop="rechargeAmount" label="充值金额" width="180"></el-table-column>
        <el-table-column prop="lv" label="会员等级" width="180"></el-table-column>
        <el-table-column prop="responsible" label="负责人" width="180"></el-table-column>
        <el-table-column label="操作" width="180">
          <template #default="scope">
            <el-button size="small" type="primary" @click="handleViewDetails(scope.row.id)">详情</el-button>
            <el-button size="small" type="danger" @click="deleteMember(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { defineProps, computed,type PropType, ref ,reactive} from 'vue';
import{Get_vip}from '@/api/customerVip/index';
import { ElProgress, ElButton } from 'element-plus';


interface SummaryData {
  count: number;
  addmonth: number;
  money: number;
}

const props = defineProps({
  data: {
    type: Object as PropType<SummaryData>,
    required: true
  }
});
const date= reactive({
  isFirst: true,
  data: [],
  Products: [],
  loading: false,
  key: "",
  details_key:"",
  details_key_id:"",
  pages: {
    page: 1,
    limit: 10,
    total: 0,
  },
});
const safeData = computed(() => ({
  count: props.data?.count ?? 0,
  addmonth: props.data?.addmonth ?? 0,
  money: props.data?.money ?? 0,
}));

const totalMembersMax = 500; // 可以根据实际情况调整
const addmonth = 500;   // 可以根据实际情况调整
const rechargeMax = 1000000;   // 可以根据实际情况调整

const totalMembersPct = computed(() =>
  Math.min((safeData.value.count / totalMembersMax) * 100, 100)
);
const newMembersPct = computed(() =>
  Math.min((safeData.value.addmonth / addmonth) * 100, 100)
);
const rechargePct = computed(() =>
  Math.min((safeData.value.money / rechargeMax) * 100, 100)
);

const emit = defineEmits(['viewDetail']);

const handleViewDetails = (id:string) => {
  emit('viewDetail',id);
};
const vip=ref(false)

const myvip=async()=>{
  vip.value=true
  date.loading=true
  const res=await Get_vip()
  if(res.code===0){
    date.data=res.data.data
    date.loading=false
  }
}

</script>

<style scoped>
.el-dialog {
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

.dialog-content {
  padding: 24px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.el-table {
  margin-top: 24px;
}

.el-table th {
  font-weight: bold;
  color: #333;
}

.el-table td {
  color: #606266;
}

.el-button {
  margin-right: 8px;
}
.overview-container {
  padding: 24px;
  border-radius: 12px;
  background-color: #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
  margin-top: 24px;
}

.stat-card {
  text-align: center;
  padding: 24px;
  border-radius: 8px;
  background-color: #f8f9fa;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.stat-card h3 {
  font-size: 24px;
  margin: 0;
}

.stat-card p {
  font-size: 14px;
  color: #606266;
  margin: 8px 0 0;
}

.el-progress-bar__inner {
  border-radius: 8px;
}
</style>



